<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <div class="p15 bg h305">
        <div class="text-center fn16">逆变器状态</div>
        <EChartBase :options="pieOptions"/>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="p15 bg h305 param">
        <div class="text-center fn16">参数信息</div>
        <div class="flex mt30">
          <img v-lazy="company_icon01" >
          <div class="ml8 line-animate">设备数量：14</div>
        </div>
        <div class="flex mt30">
          <img v-lazy="company_icon02" >
          <div class="ml8 line-animate">电站运行天数：17</div>
        </div>
        <div class="flex mt30">
          <img v-lazy="company_icon03" >
          <div class="ml8 line-animate">组件总功率：63.59</div>
        </div>
        <div class="flex mt30">
          <img v-lazy="company_icon04" >
          <div class="ml8 line-animate">二氧化碳减排：13622.98kg</div>
        </div>
        <div class="flex mt30">
          <img v-lazy="company_icon05" >
          <div class="ml8 line-animate">安装时间：2023-03-01</div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import EChartBase from '@/components/Echarts/base.vue'
import company_icon01 from '@imgs/company_icon01.svg?url'
import company_icon02 from '@imgs/company_icon02.svg?url'
import company_icon03 from '@imgs/company_icon03.svg?url'
import company_icon04 from '@imgs/company_icon04.svg?url'
import company_icon05 from '@imgs/company_icon05.svg?url'
import { reactive } from 'vue'
import { getOptions } from './pieOptions'
const pieOptions = reactive(
  getOptions(
    '逆变器状态',
    [
      { name: '在线', value: 12 },
      { name: '离线', value: 0 }
    ]
  )
)
</script>

<style lang="scss" scoped>
.bg {
  background-color: #0A1E2C;
}
.h305 {
  height: 305px;
}
</style>
